<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<meta name="format-detection" content="telephone=no">
	<meta name="author" content="演示SHOP Team">
	<meta name="copyright" content="演示SHOP">
	<title>${message("member.login.title")}[#if showPowered] - 演示电商[/#if]</title>
	<link href="${base}/favicon.ico" rel="icon">
	<link href="${base}/resources/common/css/bootstrap.css" rel="stylesheet">
	<link href="${base}/resources/common/css/font-awesome.css" rel="stylesheet">
	<link href="${base}/resources/common/css/iconfont.css" rel="stylesheet">
	<link href="${base}/resources/common/css/awesome-bootstrap-checkbox.css" rel="stylesheet">
	<link href="${base}/resources/common/css/base.css" rel="stylesheet">
	<link href="${base}/resources/mobile/member/css/base.css" rel="stylesheet">
	<link href="${base}/resources/mobile/member/css/login.css" rel="stylesheet">
	<!--[if lt IE 9]>
		<script src="${base}/resources/common/js/html5shiv.js"></script>
		<script src="${base}/resources/common/js/respond.js"></script>
	<![endif]-->
	<script src="${base}/resources/common/js/jquery.js"></script>
	<script src="${base}/resources/common/js/bootstrap.js"></script>
	<script src="${base}/resources/common/js/bootstrap-growl.js"></script>
	<script src="${base}/resources/common/js/bootbox.js"></script>
	<script src="${base}/resources/common/js/jquery.scrolltofixed.js"></script>
	<script src="${base}/resources/common/js/jquery.validate.js"></script>
	<script src="${base}/resources/common/js/jquery.validate.additional.js"></script>
	<script src="${base}/resources/common/js/jquery.form.js"></script>
	<script src="${base}/resources/common/js/jquery.cookie.js"></script>
	<script src="${base}/resources/common/js/underscore.js"></script>
	<script src="${base}/resources/common/js/url.js"></script>
	<script src="${base}/resources/common/js/velocity.js"></script>
	<script src="${base}/resources/common/js/velocity.ui.js"></script>
	<script src="${base}/resources/common/js/base.js"></script>
	<script src="${base}/resources/mobile/member/js/base.js"></script>
	[#noautoesc]
		[#escape x as x?js_string]
			<script>
			$().ready(function() {
				var IntervalCount = 120;//验证码有效时间
				var $document = $(document);
				var $loginForm = $("#loginForm");
				var $mobile = $("#mobile");
				var $rememberMobile = $("#rememberMobile");
				var rememberedMobileLocalStorageKey = "rememberedMemberMobile";
				var loginSuccessUrl = "${base}${memberLoginSuccessUrl}";
				var $getSmsCode = $("[data-action='getSmsCode']");
				var $username = $("#username");
				var $smsCode=$("#smsCode");
				// 获取手机验证码
				var countdowns;
				var count=IntervalCount;
				$getSmsCode.click(function() {
					count=IntervalCount;
					$getSmsCode.attr("disabled", true);
					var mobile=$mobile.val();
					if(mobile===null||mobile===''){
						$.bootstrapGrowl('${message("member.login.mobileRequired")}',{type: "warning"});
						$getSmsCode.attr("disabled", false);
						return false;
					}
					$.ajax({
						url: "${base}/member/login/getSmsCode?mobile="+mobile,
						type: "GET",
						dataType: "json",
						cache: false,
						success: function(data) {
							var code=data.code;
							if(code!==200){//提示确认使用用户名 密码登录
								$('#getSmsCodeMsg').html(data.message)
								[#--bootbox.confirm(data.message, function(result) {--]
								[#--	location.href ="${base}/member/login?toLogin=username";--]
								[#--});--]
								$getSmsCode.attr("disabled", false);
							}else{
								var username=data.username;
								$username.val(username);
								$.bootstrapGrowl(data.message);
								countdowns = setInterval(CountDown, 1000);
							}
						},

					});
				});
				var localCountdowns=localStorage.countdown;
				if(localCountdowns>0){
					$getSmsCode.attr("disabled", true);
					count=localCountdowns;
					countdowns = setInterval(CountDown, 1000);
				}
				function CountDown() {
					$getSmsCode.attr("disabled", true);
					$getSmsCode.text(" "+count+"s ");
					localStorage.setItem("countdown",count);
					if (count == 0) {
						clearInterval(countdowns);
						$getSmsCode.text('${message("member.login.getCaptcha")}')
						$getSmsCode.removeAttr("disabled");
						localStorage.removeItem("countdown");
						return false;
					}else{
						count--;
					}
				}

				// 记住用户名
				if (localStorage.getItem(rememberedMobileLocalStorageKey) != null) {
					$mobile.val(localStorage.getItem(rememberedMobileLocalStorageKey));
					$smsCode.focus();
					$rememberMobile.prop("checked", true);
				} else {
					$mobile.focus();
					$rememberMobile.prop("checked", false);
				}

				// 表单验证
				$loginForm.validate({
					rules: {
						mobile: "required",
						captcha: "required"
					},
					messages: {
						username: {
							required: "${message("member.login.mobileRequired")}"
						},
						smsCode: {
							required: "${message("member.login.CodeRequired")}"
						}
					},
					submitHandler: function(form) {
                        var mobile=$mobile.val();
                        var smsCode=$smsCode.val();
                        $.ajax({
                            url: "${base}/member/login/checkSmsCode?mobile="+mobile+"&smsCode="+smsCode,
                            type: "POST",
                            dataType: "json",
                            cache: false,
                            success: function(data) {
                                var code=data.code;
                                if(code!==200){
									$getSmsCode.attr("disabled", false);
									$.bootstrapGrowl(data.message,{type: "warning"});
                                }else{
                                    $(form).ajaxSubmit({
                                        successMessage: false,
                                        successRedirectUrl: function(redirectUrlParameterName) {
											localStorage.removeItem("countdown");
											clearInterval(countdowns);
                                        	var redirectUrl = Url.queryString(redirectUrlParameterName);

                                            return $.trim(redirectUrl) != "" ? redirectUrl : loginSuccessUrl;
                                        }
                                    });
                                }
                            }
                        });

					},
					invalidHandler: function(event, validator) {
						$.bootstrapGrowl(validator.errorList[0].message, {
							type: "warning"
						});
					},
					errorPlacement: $.noop
				});

				// 用户登录成功、记住用户名
				$loginForm.on("success.shopxx.ajaxSubmit", function() {
					$document.trigger("loggedIn.xiaoxiangshop.user", [{
						type: "member",
						username: $username.val()
					}]);
					if ($rememberMobile.prop("checked")) {
						localStorage.setItem(rememberedMobileLocalStorageKey, $mobile.val());
					} else {
						localStorage.removeItem(rememberedMobileLocalStorageKey);
					}
				});
			});
			</script>
		[/#escape]
	[/#noautoesc]
</head>
<body class="member login">
	<header class="header-default" data-spy="scrollToFixed">
		<div class="container-fluid">
			<div class="row">
				<div class="col-xs-1">
					<a href="javascript:;" data-action="back">
						<i class="iconfont icon-back"></i>
					</a>
				</div>
				<div class="col-xs-10">
					<h5>
						${message("member.login.title")}
					</h5>
				</div>
			</div>
		</div>
	</header>
	<main>
		<div class="container-fluid">
			<form id="loginForm" style="margin-top: 40px;" action="${base}/member/login" method="post">
				<div class="form-group" style="margin-bottom: 30px;">
					<div class="input-group">
						<span class="input-group-addon">
							<i class="iconfont icon-people"></i>
						</span>
						<input id="username" name="username" type="hidden">
						<input id="loginType" name="loginType" type="hidden" value="mobileSmsCode">
						<input id="dataSource" name="dataSource" type="hidden" value="2">
						<input id="mobile" name="mobile" class="form-control" type="text" style="height: 41px;" maxlength="200" placeholder="${message("shop.password.mobile")}" autocomplete="off">
					</div>
				</div>

				<div class="form-group" style="margin-bottom: 30px;">
					<div class="input-group">
					<span class="input-group-addon" style="height:31px">
						<i class="iconfont icon-safe"></i>
					</span>
						<input id="smsCode" name="smsCode" class="captcha form-control"  style="height: 41px;" type="text" maxlength="6" placeholder="${message("common.sms.name")}" autocomplete="off">
						<span class="input-group-btn" >
							<button class="btn btn-xs" style="min-width: 72px;height: 41px;border-color: #108ee9;background-color: #108ee9;color: #ffffff" type="button" data-action="getSmsCode">${message("member.login.getCaptcha")}</button>
						</span>
					</div>
				</div>
				<div class="checkbox">
					<input id="rememberMobile" name="rememberMobile" type="checkbox" value="true">
					<label for="rememberMobile">${message("member.login.rememberMobile")}</label> <a style="float: right;margin-right:20px;" href="${base}/member/login">${message("member.login.unamePwd")}</a>
				</div>
				<div style="margin: 20px;">
					<a id="getSmsCodeMsg" style="color:#ff0000;" href="${base}/member/login"></a>
				</div>
				<button class="btn btn-primary btn-lg btn-block"  style="margin-top: 30px;" type="submit">${message("member.login.mobileSmsCode")}</button>
			</form>
[#--			<div class="row">--]
[#--				<div class="col-xs-6 text-left">--]


[#--					<a href="${base}/member/register">${message("member.login.register")}</a>--]
[#--				</div>--]

[#--			</div>--]

			</div>
		</div>
	</main>
	<footer class="text-center">

	</footer>
</body>
</html>